<script lang="ts">
    import {format} from "@/common/util";
    import {bem} from "@/common/util";
    import mixin from "@/uni_modules/u-tools/mixin/mixin";
    import mpMixin from "@/uni_modules/u-tools/mixin/mpMixin";
    import props from "./props";
    import UIcon from "@/uni_modules/u-icon/components/u-icon/u-icon.vue";

    export default {
        name: "u-text",
        // 组件
        components: {UIcon},
        // 混入
        mixins: [props, mixin, mpMixin],
        // 事件
        emits: ["click"],
        // 数据
        data()
        {
            return {};
        },
        // 计算属性
        computed: {
            // 生成bem风格的类名
            bemClass(): string
            {
                return bem("text", [
                    this.type,
                    this.tabular ? "tabular" : "",
                    this.limit ? "limit" : ""
                ]);
            },
            // 获取行高
            getLineHeight()
            {
                return this.lineHeight ? this.$u.unit(this.lineHeight) : 1;
            },
            // 获取字体颜色
            getColor(): Record<string, any>
            {
                let style: Record<string, string> = {};

                // 判断是否存在自定义字体颜色
                if (this.color)
                {
                    style.color = this.color;
                }

                return style;
            },
            // 获取脱敏数据
            getFormatText(): string
            {
                let value = this.text as string | number;

                if (this.format && ["mobile", "name", "money"].includes(this.textType))
                {
                    // 脱敏电话
                    if (this.textType === "mobile")
                    {
                        value = format(this.text, 2);
                    }
                    // 格式化金额
                    else if (this.textType === "money")
                    {
                        value = format(this.text, 3);
                    }
                    // 格式化名字
                    else if (this.textType === "name")
                    {
                        value = format(this.text, 4);
                    }
                }

                return value?.toString() || "";
            },
            // 获取当前栅格布局列数
            getGridTemplateColumns(): string
            {
                return this.display === "grid" ? this.prefixIcon && this.suffixIcon ? "auto minmax(0, 1fr) auto" : this.prefixIcon && !this.suffixIcon ? "auto minmax(0, 1fr)" : !this.prefixIcon && this.suffixIcon ? "minmax(0, 1fr) auto" : !this.prefixIcon && !this.suffixIcon ? "auto" : "" : "";
            },
            // 前缀图标大小
            getPrefixIconfontSize(): string
            {
                let iconfontSize = "";

                if (this.prefixIconSize)
                {
                    iconfontSize = this.$u.unit(this.prefixIconSize);
                }
                else
                {
                    iconfontSize = this.$u.unit(isString(this.fontSize) ? parseFloat(this.fontSize) * 1.35 : this.fontSize * 1.35);
                }

                return iconfontSize;
            },
            // 前缀文本大小
            getPrefixTextFontSize(): string
            {
                let fontSize = "";

                if (this.prefixTextFontSize)
                {
                    fontSize = this.$u.unit(this.prefixTextFontSize);
                }
                else
                {
                    fontSize = this.$u.unit(this.fontSize);
                }

                return fontSize;
            },
            // 后缀图标大小
            getSuffixIconfontSize(): string
            {
                let iconfontSize = "";

                if (this.suffixIconSize)
                {
                    iconfontSize = this.$u.unit(this.suffixIconSize);
                }
                else
                {
                    iconfontSize = this.$u.unit(isString(this.fontSize) ? parseFloat(this.fontSize) * 1.35 : this.fontSize * 1.35);
                }

                return iconfontSize;
            },
            // 后缀文本大小
            getSuffixTextFontSize(): string
            {
                let fontSize = "";

                if (this.suffixTextFontSize)
                {
                    fontSize = this.$u.unit(this.suffixTextFontSize);
                }
                else
                {
                    fontSize = this.$u.unit(this.fontSize);
                }

                return fontSize;
            }
        },
        // 方法
        methods: {
            // 点击事件
            clickHandler(event: Record<string, any>): void
            {
                this.$emit("click", {event});

                // 阻止冒泡
                this.stop && this.stopPropagation(event);

                // 阻止事件默认行为
                this.prevent && this.preventDefault(event);
            }
        }
    };
</script>

<template>
    <!-- 文本组件 -->
    <view
        :class="[customClass, bemClass]"
        :style="[
            customStyle,
            {'--custom-text-display-align-item': alignItems},
            {'--custom-text-font-size': $u.unit(fontSize)},
            {'--custom-text-line-height': getLineHeight},
            {'--custom-text-font-weight': fontWeight},
            {'--custom-text-display': display},
            {'--custom-text-text-justify-content': justifyContent},
            {'--custom-text-decoration': decoration},
            {'--custom-text-clamp': clamp},
            {'--custom-text-white-space': whiteSpace},
            {'--custom-text-word-break': wordBreak},
            {'--custom-text-grid-template-columns': getGridTemplateColumns},
            {'--custom-text-grid-gap': $u.unit(gap)},
            {'--custom-text-prefix-text': prefixText ? `\'${prefixText}\'` : ''},
            {'--custom-text-prefix-text-font-size': getPrefixTextFontSize},
            {'--custom-text-prefix-text-color': prefixTextColor},
            {'--custom-text-prefix-text-font-weight': prefixTextFontWeight !== 'inherit' ? prefixTextFontWeight : fontWeight},
            {'--custom-text-prefix-text-space': $u.unit(prefixTextGap)},
            {'--custom-text-suffix-text': suffixText ? `\'${suffixText}\'` : ''},
            {'--custom-text-suffix-text-font-size': getSuffixTextFontSize},
            {'--custom-text-suffix-text-color': suffixTextColor},
            {'--custom-text-suffix-text-font-weight': suffixTextFontWeight !== 'inherit' ? suffixTextFontWeight : fontWeight},
            {'--custom-text-suffix-text-space': $u.unit(suffixTextGap)},
            {'--custom-text-fix-align-item': fixAlignItems},
            [`--custom-text-padding-top: ${$u.unit(padding[0])}`],
            [`--custom-text-padding-right: ${$u.unit(padding[1])}`],
            [`--custom-text-padding-bottom: ${$u.unit(padding[2])}`],
            [`--custom-text-padding-left: ${$u.unit(padding[3])}`]
        ]"
        class="u-text-warp"
        @tap="clickHandler"
    >
        <!-- 前缀图标 -->
        <view
            v-if="prefixIcon"
            class="prefix-icon"
        >
            <u-icon
                :color="prefixIconColor"
                :icon="prefixIcon"
                :size="getPrefixIconfontSize"
            />
        </view>
        <!-- //前缀图标 -->

        <!-- 文本 -->
        <view class="text-view">
            <text
                :style="[
                    getColor,
                    [fontFamily !== 'normal' ? `font-family: ${fontFamily};` : '']
                ]"
                class="text"
            >
                {{ getFormatText }}
            </text>
        </view>
        <!-- //文本 -->

        <!-- 后缀图标 -->
        <view
            v-if="suffixIcon"
            class="suffix-icon"
        >
            <u-icon
                :color="suffixIconColor"
                :icon="suffixIcon"
                :size="getSuffixIconfontSize"
            />
        </view>
        <!-- //后缀图标 -->
    </view>
    <!-- //文本组件 -->
</template>

<style lang="scss" scoped>
    // 信息提示
    $u-text-info-color: $theme-main-text-color !default;

    // 主要提示
    $u-text-primary-color: $theme-primary !default;

    // 成功提示
    $u-text-success-color: $theme-success !default;

    // 错误提示
    $u-text-error-color: $theme-error !default;

    // 警告提示
    $u-text-warning-color: $theme-warning !default;

    .u-text-warp
    {
        line-height: var(--custom-text-line-height);
        display: var(--custom-text-display);
        align-items: var(--custom-text-display-align-item);
        justify-content: var(--custom-text-text-justify-content);
        padding: var(--custom-text-padding-top) var(--custom-text-padding-right) var(--custom-text-padding-bottom) var(--custom-text-padding-left);
        grid-template-columns: var(--custom-text-grid-template-columns);
        grid-gap: var(--custom-text-grid-gap);

        &.u-text
        {
            // 文本容器
            .text-view
            {
                display: flex;
                align-items: var(--custom-text-fix-align-item);

                // 文本
                .text
                {
                    font-size: var(--custom-text-font-size);
                    font-weight: var(--custom-text-font-weight);
                    text-decoration: var(--custom-text-decoration);
                }

                // 前缀
                &:before
                {
                    font-size: var(--custom-text-prefix-text-font-size);
                    font-weight: var(--custom-text-prefix-text-font-weight);
                    margin-right: var(--custom-text-prefix-text-space);
                    content: var(--custom-text-prefix-text);
                    text-decoration: var(--custom-text-decoration);
                }

                // 后缀
                &:after
                {
                    font-size: var(--custom-text-suffix-text-font-size);
                    font-weight: var(--custom-text-suffix-text-font-weight);
                    margin-left: var(--custom-text-suffix-text-space);
                    content: var(--custom-text-suffix-text);
                    text-decoration: var(--custom-text-decoration);
                }
            }

            // 文本溢出限制
            &-limit
            {
                // 文本容器
                .text-view
                {
                    overflow: hidden;
                    text-overflow: ellipsis;

                    // 文本
                    .text
                    {
                        display: -webkit-box;
                        white-space: var(--custom-text-white-space);
                        word-break: var(--custom-text-word-break);
                        line-clamp: var(--custom-text-clamp);
                        -webkit-line-clamp: var(--custom-text-clamp);
                        -webkit-box-orient: vertical;
                    }
                }
            }

            // 等宽字体
            &-tabular
            {
                // 文本容器
                .text-view
                {
                    // 文本
                    .text
                    {
                        font-variant-numeric: tabular-nums;
                    }
                }
            }

            // 信息提示
            &-info
            {
                // 文本容器
                .text-view
                {
                    // 文本
                    .text
                    {
                        color: $u-text-info-color;
                    }

                    // 前缀
                    &:before
                    {
                        color: var(--custom-text-prefix-text-color, $u-text-info-color);
                    }

                    // 后缀
                    &:after
                    {
                        color: var(--custom-text-suffix-text-color, $u-text-info-color);
                    }
                }
            }

            // 成功提示
            &-success
            {
                // 文本容器
                .text-view
                {
                    // 文本
                    .text
                    {
                        color: $u-text-success-color;
                    }

                    // 前缀
                    &:before
                    {
                        color: var(--custom-text-prefix-text-color, $u-text-success-color);
                    }

                    // 后缀
                    &:after
                    {
                        color: var(--custom-text-suffix-text-color, $u-text-success-color);
                    }
                }
            }

            // 主要提示
            &-primary
            {
                // 文本容器
                .text-view
                {
                    // 文本
                    .text
                    {
                        color: $u-text-primary-color;
                    }

                    // 前缀
                    &:before
                    {
                        color: var(--custom-text-prefix-text-color, $u-text-primary-color);
                    }

                    // 后缀
                    &:after
                    {
                        color: var(--custom-text-suffix-text-color, $u-text-primary-color);
                    }
                }
            }

            // 错误提示
            &-error
            {
                // 文本容器
                .text-view
                {
                    // 文本
                    .text
                    {
                        color: $u-text-error-color;
                    }

                    // 前缀
                    &:before
                    {
                        color: var(--custom-text-prefix-text-color, $u-text-error-color);
                    }

                    // 后缀
                    &:after
                    {
                        color: var(--custom-text-suffix-text-color, $u-text-error-color);
                    }
                }
            }

            // 警告提示
            &-warning
            {
                // 文本容器
                .text-view
                {
                    // 文本
                    .text
                    {
                        color: $u-text-warning-color;
                    }

                    // 前缀
                    &:before
                    {
                        color: var(--custom-text-prefix-text-color, $u-text-warning-color);
                    }

                    // 后缀
                    &:after
                    {
                        color: var(--custom-text-suffix-text-color, $u-text-warning-color);
                    }
                }
            }
        }
    }
</style>